<!-- src/components/ImagePlaceholder.vue -->
<template>
  <div v-if="src" class="image-container">
    <img :src="src" :alt="alt" class="image" />
  </div>
  <div v-else class="placeholder">
    <p>{{ alt }}</p>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  src: {
    type: String,
    default: '',
  },
  alt: {
    type: String,
    default: 'Placeholder',
  },
});
</script>

<style scoped>
.image-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.placeholder {
  width: 100%;
  height: 200px; /* 根据需要调整高度 */
  background-color: #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.placeholder p {
  font-size: 1.2em;
  color: #666;
  text-align: center;
}
</style>
